<!--
 * @Author: wangding
 * @Date: 2020-11-11 11:02:53
 * @LastEditTime: 2021-01-04 19:22:13
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\device\battery\battery.vue
-->
<template>
    <div class="battery-main-box">
        <div class="search-box">
            <div class="search-box-sub">
                <span class="lable-text">{{$t('device.inverter.SN')}}</span>
                <el-input v-model="inverterSn" v-big style="width:160px;" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('battery.batterySN')}}</span>
                <el-input v-model="batterySN" style="width:160px;" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('battery.capacity_query')}}</span>
                <el-input v-model="minCapacity" style="width:160px;" :placeholder="$t('pleaseInput')"></el-input>
                <span>-</span>
                <el-input v-model="maxCapacity" style="width:160px;" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <el-button type="primary" @click='query'>{{$t('query')}}</el-button>
            </div>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe   :column='column' :select='false' @selection-change="handleSelectionChange($event)">
            <template #batteryType="{data}">
                {{comm.returnCode(dictionary.BATTERY_TYPE,data.batteryType)}}
            </template>
            <template #inverterSn="{data}">
                <a href="javascript:;" @click="windowOpen(data)" class="hover-a-link" style="color:#ED7523;">{{data.inverterSn}}</a>
            </template>
            <template #enableFlag="{data}">
                <span :style='data.enableFlag==1?"color:#429dff":""'>
                    <i class="iconfont icon-wifi" style="vertical-align: middle;" ></i>
                    {{comm.returnCode(dictionary.ON_LINE_STATE,data.enableFlag)}}
                </span>
            </template>
            <template #option="{data}">
                <div class="option-box">
                    <el-button size="samll" icon="el-icon-search" :title="$t('Battery_capacity')" @click="showData(data)" :disabled="data.enableFlag == 0"></el-button>
                </div>
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
        <batteryData :batteryData="batteryData"></batteryData>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTable'
import batteryData from './batteryData'
export default {
    components: {
        baseTable,
        batteryData
    },
    props: {

    },
    data() {
        return {
            inverterSn:'',
            batterySN:'',
            minCapacity:'',
            maxCapacity:'',
            current:1,
            size:10,
            total:1,
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('device.inverter.SN'),
                value: 'inverterSn',
                slot: 'inverterSn'
            },
            {
                title: this.$t('battery.batterySN'),
                value: 'batterySN',
                slot: 'batterySN'
            },
            {
                title: this.$t('battery.atteryType'),
                value: 'batteryType',
                slot: 'batteryType'
            },
            {
                title: this.$t('battery.capacity'),
                value: 'capacity',
                slot: 'capacity'
            },
            {
                title: this.$t('battery.limitRatedPower'),
                value: 'limitRatedPower',
                slot: 'limitRatedPower'
            }, {
                title: this.$t('battery.limitVoltage'),
                value: 'limitVoltage',
                slot: 'limitVoltage',
                min_width:'120'

            },
            {
                title: this.$t('battery.limitCurrent'),
                value: 'limitCurrent',
                slot: 'limitCurrent'
            },
            {
                title: this.$t('battery.lowerTemp'),
                value: 'lowerTemp',
                slot: 'lowerTemp'
            },
            {
                title: this.$t('battery.highTemp'),
                value: 'highTemp',
                slot: 'highTemp'
            },
            {
                title: this.$t('Inverter_online_status'),
                value: 'enableFlag',
                slot:'enableFlag'
            },
            {
                title: this.$t('devWifi.accessTime'),
                value: 'accessTime',
                slot: 'accessTime'
            },
            {
                title: this.$t('control'),
                value: 'sid',
                slot: 'option'
            }
            ],
            dictionary:{},
            batteryData:{}
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        // let url = this.$router.resolve({
        //     path: "/overview-inverter",
        // });
        // console.log(url,'url');
        // window.open(url.href, '_blank');
        this.getDictionaryBatch()
        this.batteryGetBatterys()
    },
    methods: {
        showData(data){
            this.batteryData = data
            this.$store.commit('setVisibleShow',true)
        },
        windowOpen(data){
            console.log(data,'battery')
            sessionStorage.setItem("selRow_inverterType",data.inverterType);
            sessionStorage.setItem("selRow_siteid",data.siteIds);
            sessionStorage.setItem("selRow_inverter_sn",data.inverterSn);
            sessionStorage.setItem("selRow_wifi_sn",data.wifiSn);
            sessionStorage.setItem("selRow_firmId",data.firmIds);
            sessionStorage.setItem("selRow_sn_type",2);//逆变器
            sessionStorage.setItem("selRow_phase_type",data.phaseFlag);
            sessionStorage.setItem("selRow_battery_type",data.batteryFlag);
            sessionStorage.setItem("selRow_load_type",data.loadFlag);
            sessionStorage.setItem("selRow_siteId",data.siteIds);
            sessionStorage.setItem("selRow_batteryTypeFlag",data.batteryType);//电池类型
            sessionStorage.setItem("selRow_userId",data.userIds);
            sessionStorage.setItem("selRow_epsStatus",data.epsStatus);
            let url = this.$router.resolve({
                path: "/overview-inverter",
            });
            window.open(url.href, '_blank');
        },
        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:'BATTERY_TYPE,ON_LINE_STATE',
                lang:localStorage.getItem('lang')||'zh_CN'
            })
            this.dictionary = res || {}
        },
        async batteryGetBatterys(){
            this.loading = true
            let res = await this.API.batteryGetBatterys({
                batterySN: this.batterySN,
                inverterSn: this.inverterSn,
                minCapacity: this.minCapacity,
                maxCapacity: this.maxCapacity,
                current: this.current,
                size: this.size
            })
            this.loading = false
            this.total = res.total
            this.dataRows = res.rows
        },
        handleCurrentChange(val) {
          this.current = val
          this.batteryGetBatterys()
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.batteryGetBatterys()
        },
        query(){
            this.current = 1
            this.batteryGetBatterys()
        }
    },
};
</script>

<style  lang="less" scoped>
.battery-main-box{
    .hover-a-link:hover{
        text-decoration: underline;
    }
        .el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover {
        background-color: transparent;
    }
}
</style>
